<template>
   <div >
            <!-- 内容 -->
            <div id="content" class="base overflow-auto" >
               <textarea  id="contentInput"  v-model="form.content" @input='getContentLength($event.target)' maxlength="150"
                           placeholder="有趣的内容才能吸引人噢！"/>    
               <p>{{150-contentLength}}</p>
                  
                  <!-- 图片 -->
               
                     <el-upload
                        class="avatar-uploader flex"
                        v-model="form.image"
                        :headers="headers" 
                        :on-remove="handleRemove"
                        :on-success="handleAvatarSuccess"
                        :on-error="handleError"
                        :before-upload="beforeAvatarUpload"
                        :limit='9' 
                        :multiple="true"
                        :file-list="form.imageList"
                        action="/api/File/upload/image/ArticleImage"
                        ref="imageList"
                        list-type="picture-card">   
                        <i class="el-icon-plus"></i>
                     </el-upload>                   
            </div>
            
    
            <el-button icon="el-icon-position" @click="publish_" id="publicButton">下一步</el-button>

   </div> 
</template>
<script>
import {mapActions, mapMutations,mapState} from 'vuex'
import common from "@/common/global"
  export default 
  {
     name :'', 
     data(){
        return{
          titleLength:0,
          contentLength:0,
          form: {content: "",image: "",imageList:[]},
          ImageUrls:[],
          headers:{
             token:localStorage.getItem("token")
          },
        }
     },
     computed:{
      ...mapState('Login',['User']),
      ...mapState('Init',['ArticleTypeData']), //类型
      ...mapState('Article',['PublishData','PublishType']) //form
     },
    mounted() {
      this.init()
    },
     methods:{
       ...mapMutations('Article',['SETPUBLISHSTATE']),

        getTitleLength(e) {
         let length=e.value.trimLeft().length
			this.titleLength = length
			this.form.title = e.value.trimLeft()
         this.form.title = common.filterSensitiveInfo(this.form.title)
	   	},
		  getContentLength(e) {
			 let length=e.value.trimLeft().length
			 this.contentLength = length
		    this.form.content = e.value.trimLeft()
          this.form.content = common.filterSensitiveInfo(this.form.content)
		 },
       //初始化信息
       init(){

          this.form.content = this.PublishData?.content || ''
          let imageListed = Object.assign([],this.PublishData?.image) || []
          this.ImageUrls = imageListed
          imageListed.forEach((element,index) => {
            let data ={name:'已上传图片'+ index , url:element , type: 1}
            this.form.imageList.push(data)
          });

       },

        /*删除图片*/
        handleRemove(file) { 
          if(file.type == 1) return   this.ImageUrls = this.ImageUrls.filter(item => item != file.url)
          let res = file.response
          this.ImageUrls = this.ImageUrls.filter(item => item != res.data)
        },
        handleError(file){
         this.$message.error('未知错误');
       },
         handleAvatarSuccess(res) {
            if(res.type=='error') return this.$message.error('未知错误');
            this.form.image = res.data;
            this.ImageUrls.push(res.data);

        },
        //上传图片前做一些限制
         beforeAvatarUpload(file) {
            const whiteList = ["image/jpeg", "image/png"];
            if (whiteList.indexOf(file.type) === -1) {
               this.$message.error('上传文件类型只能是 image/jpeg, image/png ');
               return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) this.$message.error('上传图片大小不能超过 5MB!');
            return isLt2M;
        },
        //发布
        async  publish_(){
           if(this.form.content=='') return this.$message.error('内容不能为空')
           if(this.User==null) return this.$message.error('非法发布')
            this.form.ImageUrls = this.ImageUrls
            this.form.image=this.ImageUrls.toString() || null;
            let title = this.PublishType == 1 ?'发布':'修改'
            return this.SETPUBLISHSTATE({index:6,title,data:this.form})
          
        }
   
     },
  }
</script>
<style scoped lang="less">

/* upload样式 */

::v-deep .el-upload-list__item-thumbnail{ //图片
   object-fit: cover !important;
}

::v-deep .el-upload{  //每个盒子
    border: 2px solid var(--GeneralBackColor);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
}
::v-deep .el-upload:hover{
   border: 2px solid var(--GeneralBackColor);
}

.avatar-uploader{
    border-radius: 6px;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    
    i{
      font-size: 50px;
    }
}


//内容
#content{
   width: 100%;
   border-radius: 5px;
   padding: 10px;
   box-sizing: border-box;
   background: rgba(255, 255, 255, 0.7);
    --contentHeight:200px;
   position: relative;
   height: 380px;
   overflow: auto;
    #contentInput{
      width: 100%;
      height:var(--contentHeight);
		font-size: 15px;

    }
    p{
      position: absolute;
      right: 20px;top: var(--contentHeight);
    }
}
//发布按钮
#publicButton{
   margin: 0;
   width: 100%;
   border-radius: 25px;
   background: var(--GeneralBackColor);
   color: white;
}



</style>